<template>
    <div class="swiper-demo">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in swiperList" :key="item.id">
                    <img :src="item.imgUrl" alt="" v-if="swiperList.length > 0">
                </div>

            </div>
            <!-- 前进后退按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper'
import "swiper/css/swiper.min.css"
import { getLoop } from '@/api/request'
export default {
    data() {
        return {
            swiperList: []
        }
    },
    created() {

    },
    mounted() {
        getLoop(5).then(res => {
            this.swiperList = res.data

            this.$nextTick(function () {
                new Swiper('.swiper-container', {
                    direction: 'horizontal', // 垂直切换选项
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                })
            })
        })
    }
}
</script>
<style lang="less" scoped>
.template {
    background: #edf1f7;
}

.swiper-demo {

    width: 1160px;
    height: 432px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
}

.swiper-wrapper{
    width: 1128px;
    height: 400px;
    margin: 0 auto;
    border-radius: 8px;

    img {
        width: 1128px;
        height: 400px;
    }
}
</style>